<template>
<div>
<!-- banner顶部 -->
  <div class="banner" :style="cover">
    <h1 class="banner-title">{{ photoAlbumName }}</h1>
  </div>
<!-- 相册列表 -->
  <v-card class="blog-container">
    <div class="photo-wrap">
      <img
        v-for="(item, index) of photoList"
        class="photo"
        :key="index"
        :src="item"
        @click="preview(index)"
        />
    </div>
    <div v-if="photoList.length <= 0">该相册下没有照片</div>
  <!-- 无限加载 -->
    <infinite-loading @infinite="infiniteHandler">
      <div slot="no-more" />
      <div slot="no-results" />
    </infinite-loading>
  </v-card>
</div>
</template>

<script>
import {getPhotoList} from "@/api/photo";

export default {
  name: "Photo",
  data(){
    return {
      photoAlbumName:"",
      photoAlbumCover:"",
      photoList:[],
      current:1,
      size:2
    }
  },
  methods:{
    preview(index) {
      this.$imagePreview({
        images:this.photoList,
        index:index
      })
    },
    infiniteHandler($state)  {
      getPhotoList(this.$route.params.albumId,{current:this.current, size:this.size}).then(({data}) => {
        this.photoAlbumCover = data.data.photoAlbumCover
        this.photoAlbumName = data.data.photoAlbumName
        if (data.data.photoList.length) {
        this.current++
        this.photoList.push(...data.data.photoList)
        $state.loaded()
        } else {
          $state.complete()
        }
      })
    }
  },
  computed:{
    cover() {
      return ( "background: url(" + this.photoAlbumCover + ") center center / cover no-repeat" )
    }
  }
}
</script>

<style scoped>
.photo-wrap {
  display: flex;
  flex-wrap: wrap;
}
.photo {
  margin: 3px;
  cursor: pointer;
  flex-grow: 1;
  object-fit: cover;
  height: 200px;
}
.photo-wrap::after {
  content: "";
  display: block;
  flex-grow: 9999;
}
@media (max-width: 759px) {
  .photo {
    width: 100%;
  }
}
</style>
